<template>
  <el-card :body-style="{ padding: '0px' }">
    <div @click="handleCardClick">
      <div class="card-container">
        <div class="card-img">
          <el-image fit="cover" style="height: 150px" :src="data.img.full_url" lazy></el-image>
          <span class="overlay"></span>
        </div>
        <div class="detail p-1.5 leading-4">
          <div class="px-1 py-2 truncate title">{{ data.title }}</div>
          <div class="desc mt-1.5">
            <span class="is-price">{{ data.price }}</span>
            <!-- TODO: no field -->
            <span class="ml-2 text-xs text-gray-400">销售{{ data.sales || 0 }}单</span>
          </div>
        </div>
      </div>
      <div class="px-1.5 text-sm text-gray-400">
        <span class="mr-2">
          <u-icon name="iconyanjing" class="mr-1"></u-icon>
          <span>2988</span><!-- TODO: no field -->
        </span>
        <span class="mr-2">
          <u-icon name="iconcomment" class="mr-1"></u-icon>
          <span>18</span><!-- TODO: no field -->
        </span>
        <span class="mr-2">
          <u-icon name="icondianzan" class="mr-1"></u-icon>
          <span>18</span><!-- TODO: no field -->
        </span>
      </div>
    </div>
    <el-divider content-position="left"><i class="el-icon-star-on"></i></el-divider>
    <div class="flex justify-end">
      <span class="mr-2.5 mb-2.5 text-gray-600 text-sm">{{ updateTime }}</span><!-- TODO: no field -->
    </div>
  </el-card>
  <!-- <Drawer v-if="data" :type="type" :food="data" ref="drawerRef" /> -->
</template>

<script setup lang="ts">
import dayjs from "@/plugins/day";
import { onMounted, ref } from "vue";
import Drawer from "@/views/components/Drawer.vue";
import { FoodItem } from "@/types/food";
interface propsApi {
  data: FoodItem;
}
// const drawerRef = ref();
// const type = ref(0)
const props = withDefaults(defineProps<propsApi>(), {});


const emit = defineEmits<{
  (e: 'foodSelect', food: FoodItem): void
}>()

const handleCardClick = () => {
  props.data.sku.forEach(el => {
    el.json = typeof el.json === 'string' ? JSON.parse(el.json) : el.json
  })
  emit("foodSelect", props.data)
};
const updateTime = ref(dayjs(props.data.updateTime).fromNow());

</script>

<style lang="scss">
.card-container {
  .card-img {
    overflow: hidden;
    position: relative;
    height: calc(100% - 52.4px);

    .el-image {
      display: flex;
      transition: all 0.5s ease-out;
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      opacity: 0;
      transition: all 0.5s ease-out;
    }
  }
}

.card-container:hover {
  .el-image {
    transform: scale(1.1);
  }

  .label {
    color: red;
  }

  .overlay {
    opacity: 0.2;
  }
}
</style>
